<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			.xq-good-sentence-ul.mui-table-view:before,
			.xq-good-sentence-ul.mui-table-view:after{
				height: 0;
			}
			 
			.xq-good-sentence-ul .mui-table-view-cell:last-child:after{
				height: 1px;
			}
			
			.i-like-it-flag-class{
				color: red;
			}
			
			.xq-window-body{
				padding: 16px 16px 60px 16px;
			}
			/* .xq-header-bar::before {
			    content: " ";
			    height: 6px;
			    width: 100px;
			    border-top-left-radius: 3px;
			    border-top-right-radius: 3px;
			    border-bottom-left-radius: 3px;
			    border-bottom-right-radius: 3px;
			    background-color: rgba(0,0,0,0.3);
			    z-index: 13;
			    position: absolute;
			    left: 50%;
			    transform: translate(-50%, -50%);
			    top: -6px;
			} */
		</style>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav xq-window-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">诗文</h1>
			<a class="mui-icon mui-icon-settings mui-pull-right xq-header-bar-btn" id='gushiwen-det-page-setting'></a>
			<a class="mui-icon mui-icon-upload mui-pull-right xq-header-bar-btn" id='to-card-make-page'></a>
			<a class="mui-icon mui-icon-star mui-pull-right xq-header-bar-btn" id='i-like-it'></a>
		</header>
		<div id="gushiwen-info-content" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll" v-cloak>
				
				<div class="xq-window-body">
					<div class="gushiwen-title-content select-able">
						<div class="gushiwen-title">{{title}}</div>
						<div class="gushiwen-writer" fill-writer-id :writer-id="writerId" @click="onWriterInfoClicked($event)">
							[<span>{{dynasty}}</span>]
							<span>{{writer}}</span>
						</div>
					</div>
					<div class="gushiwen-content select-able">
						<div v-html="content"></div>
					</div>
					<div v-if="mainImg" class="mui-card-media sub-content" >
						<div class="sub-content-title">配图</div>
						<div :style="bgStyle">
							<img style="width: 100%;border-radius: 2px;" :src="mainImg">
						</div>
					</div>
					<div v-if='tagList' class="sub-content">
						<div class="sub-content-title">标签</div>
						<ul class="gushiwen-tag-list-content">
							<li v-for="(itemInfo,index) in tagList" :index="index" @click="onTagClicked($event)">{{itemInfo.tagName}}</li>
						</ul>
					</div>
					<div v-if='goodSententceList' class="sub-content">
						<div class="sub-content-title">名句</div>
						<div class="sub-content-main">
							<ul class="xq-good-sentence-ul mui-table-view">
								<li v-for="(itemInfo,index) in goodSententceList" class="mui-table-view-cell" :index="index"
								@click="onSentenceClicked($event)">{{itemInfo.name}}</li>
							</ul>
						</div>
					</div>
					<div class="sub-content">
						<div class="sub-content-title">作者</div>
						<div class="mui-card xq-writer-content" fill-writer-id :writer-id="writerId" @click="onWriterInfoClicked($event)">
							<!--页眉，放置标题-->
							<div class="mui-card-header mui-card-media">
								<img :src="writerInfo.headImageUrl"/>
								<div class="mui-media-body">
									<div show-name='writer'>{{writer}}</div>
									<p show-name='dynasty'>{{dynasty}}</p>
								</div>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<div class="xq-padding-content" >{{writerInfo.simpleIntro}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/bottomFloatPanel.js"></script>
		<script src="../js/gushiwenDetailPageManager.js"></script>
		<script type="text/javascript">
			
			var gushiwenDetailId='gushiwen-detail-content';
			var bottomPanel=null;
			var currentDetailInfo={};
			mui.init({
				 gestureConfig:{
				    longtap: true, //默认为false
					doubletap: true, //默认为false
				}
			});
			//
			mui.ready(function(e){
				if(mui.os.plus){
					return;
				}
				var randomId=Math.floor(Math.random()*1000+1);
				initGushiwenDetailPageInfo(randomId);
			});
			//
			mui.plusReady(function(e){
				var self = plus.webview.currentWebview();
				var infoId = self.infoId;//获得参数
				if(!infoId){
					infoId=Math.floor(Math.random()*1000+1);
				}
				var shiwenIdList=self.shiwenIdList;
				shiwenIdList=shiwenIdList||[];
				console.info('infoId='+infoId+";shiwenIdList="+shiwenIdList.length);
				initGushiwenDetailPageInfo(infoId,shiwenIdList)
			});
			//
			function initGushiwenDetailPageInfo(gushiwenId,shiwenIdList){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("gushiwenDetail");
				SettingInfoManager.setPageFontFromSetting();
				var gushiwenDetailPageManager=new GushiwenDetailPageManager();
				gushiwenDetailPageManager.init({gushiwenId:gushiwenId,gushiwenIdList:shiwenIdList});
			}
			
		</script>
	</body>
</html>
